<template>
  <div class="home">
    <page-scroll :footer="true">
      <template #bg>
        <!-- <div class="bg">
              <img src="../../assets/images/Group32.png">
          </div> -->
      </template>
      <template #content>
        <div class="he_top">
          <div class="head">
            <div class="flex">
              <div class="photo rel" @change="changeImage($event)">
                <img :src="userData.avatar" />
                <input
                  class="file"
                  type="file"
                  accept="image/*"
                  @change="handleAfterRead"
                />
              </div>

              <div class="flex1">
                <div class="n">
                  {{ maskNickname($store.state.userData.nickname) }}
                </div>
                <div class="s">
                  <span
                    >ID : {{ userData.userId }}
                    <img
                      src="../../assets/images/icon_copy_yellow.png"
                      alt=""
                      @click="onCopy(userData.userId)"
                  /></span>
                </div>
              </div>
            </div>
            <div class="bott" @click="$router.push('/my/userinfo')">
              <div class="my_icon_img" v-show="userData.partnerLevel != -1">
                <img :src="userData.partnerLevelIcon" />
                <span>{{ userData.partnerLevelName }}</span>
              </div>
              <div class="my_icon_img" v-show="userData.partnerLevel == -1">
                <img src="../../assets/images/partnerLevelIcon.png" />
                <span>S0</span>
              </div>
              <van-icon name="arrow" />
              <!--              <div class="ri" @click="check">{{ $t("page4.doc49") }}</div>-->
            </div>
          </div>

          <div class="infos_list">
            <div class="le" @click="path_url('/wallet/index')">
              <img src="../../assets/images/money_01.png" alt="" />
              <div class="name line">
                <div class="pr">
                  <div class="price">
                    USD {{ income_info.totalAmount | Svalues }}
                  </div>
                </div>
                <div class="ti">{{ $t("page4.doc133") }}</div>
              </div>
            </div>
            <div class="le" @click="path_url('/wallet/index3')">
              <img src="../../assets/images/money_02.png" alt="" />
              <div class="name line">
                <div class="pr" v-if="parseFloat(userData.pendingIncome) > 0">
                  <van-badge :content="1">
                    <div class="price">
                      {{ userData.pendingIncome | Svalues }}
                    </div>
                  </van-badge>
                </div>
                <div class="pr" v-else>USD 0</div>
                <div class="ti">{{ $t("page4.doc163") }}</div>
              </div>
            </div>
            <div class="le" @click="path_url('/wallet/index1')">
              <img src="../../assets/images/money_03.png" alt="" />
              <div class="name">
                <div class="pr">
                  <div class="price">
                    USD {{ income_info.electronBalance | Svalues }}
                  </div>
                </div>
                <div class="ti">{{ $t("page4.doc30") }}</div>
              </div>
            </div>
          </div>
        </div>

        <div class="container">
          <div class="tool">
            <div
              class="item"
              v-for="(item, index) in toolList"
              :key="index"
              @click="path_url(item.url)"
            >
              <div class="l">
                <img :src="item.img" alt="" />
                <div class="name">{{ item.name }}</div>
              </div>
              <van-icon name="arrow" />
            </div>
          </div>
          <div class="but" @click="quit()">{{ $t("page.doc96") }}</div>
        </div>
      </template>

      <van-popup
        v-model="isShowNotice"
        style="width: 6.5rem"
        :close-on-click-overlay="false"
        @click-overlay="isShowNoticeFalse"
        class="no_po_show"
      >
        <div class="boximg">
          <div class="no_po">
            <img
              class="close"
              @click="path_url(isShowNoticeItem.forwardPath)"
              :src="isShowNoticeItem.imgUrl"
            />
          </div>
          <div class="closeimg">
            <img
              class="closure"
              @click="isShowNoticeFalse"
              src="../../assets/images/closure.png"
            />
          </div>
        </div>
      </van-popup>

      <van-popup
        v-model="isShowNotices"
        @close="popupClose"
        style="width: 6.5rem"
        class="no_po_shows"
      >
        <div class="no_pos">
          <img class="close" src="../../assets/images/trumpet1.png" />
          <div class="top">
            <div class="n">{{ isShowNoticeObj.title }}</div>
          </div>
          <div class="con">
            <div class="s1">{{ isShowNoticeObj.describe }}</div>
            <div class="s2" v-html="isShowNoticeObj.content"></div>
            <div class="s2">{{ isShowNoticeObj.time }}</div>
          </div>
        </div>
      </van-popup>

      <template #footer>
        <gl-footer :activeTitle="activeTitle"></gl-footer>
      </template>
    </page-scroll>

    <!-- 添加视频弹窗 -->
    <van-popup 
      v-model="showVideo" 
      class="video-popup"
      :close-on-click-overlay="true"
      @close="closeVideo"
    >
      <div class="video-container">
        <video 
          ref="videoPlayer"
          controls
          :src="videoUrl"
          class="video-player"
        ></video>
        <div class="bottom-close-btn" @click="closeVideo">
          <van-icon name="cross" size="20" />
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import { mapActions, mapGetters, mapMutations } from "vuex";

export default {
  data() {
    return {
      activeTitle: "my",
      income_info: [],
      data2: [
        {
          name: this.$t("title.doc42"),
          url: "/my/help",
          img: require("../../assets/images/u_it8.png"),
        },
        {
          name: this.$t("page.doc99"),
          url: "/my/kf",
          img: require("../../assets/images/u_it4.png"),
        },
        {
          name: this.$t("page.doc43"),
          url: "/my/lang",
          code: "trade",
          img: require("../../assets/images/u_it5.png"),
        },
        {
          name: this.$t("title.doc35"),
          url: "/information/index",
          img: require("../../assets/images/u_it6.png"),
        },
        {
          name: this.$t("title.doc34"),
          url: "/my/about",
          img: require("../../assets/images/u_it7.png"),
        },
      ],
      isShowNotice: false,
      isShowNoticeItem: "",
      isShowNoticeObj: {},
      isShowNotices: false,
      isShowNoticeImgArr: [],
      isShowNoticeImgIndex: 0,
      unreadCount: 0,
      list4: [
        {
          name: this.$t("title.doc52"),
          url: "tips",
          img: require("../../assets/images/u_it10.png"),
        },
      ],
      toolList: [
        {
          name: this.$t("page4.doc10"),
          url: "/my/real_authentication",
          img: require("../../assets/images/Group35.png"),
        },
        {
          name: this.$t("title.doc30"),
          url: "/my/password_login",
          img: require("../../assets/images/Group21.png"),
        },
        {
          name: this.$t("page.doc97"),
          url: "/my/password_trade",
          code: "trade",
          img: require("../../assets/images/Group22.png"),
        },
        {
          name: this.$t("page.doc999"),
          url: "web",
          img: require("../../assets/images/shipinbofang.png"),
        },
        {
          name: this.$t("title.doc35"),
          url: "/information/index",
          img: require("../../assets/images/Group10.png"),
          unreadCount: this.unreadCount,
        },
        {
          name: this.$t("page.doc43"),
          url: "/my/lang",
          code: "trade",
          img: require("../../assets/images/Group24.png"),
        },
        {
          name: this.$t("page.doc99"),
          url: "CS",
          img: require("../../assets/images/Group25.png"),
        },
        {
          name: this.$t("page.doc207"),
          url: "/my/download",
          img: require("../../assets/images/Group47.png"),
        },
        {
          name: this.$t("page1.doc47"),
          url: "website",
          img: require("../../assets/images/Group18.png"),
        },
        // {
        //   name: this.$t("page.doc98"),
        //   url: "/my/invite",
        //   img: require("../../assets/images/Group19.png"),
        // },
        // {name:this.$t('title.doc42'),url:'/my/help',img:require('../../assets/images/Group23.png')},
        // {
        //   name: this.$t("title.doc34"),
        //   url: "/my/about",
        //   img: require("../../assets/images/Group26.png"),
        // },
      ],
      showVideo: false,
      videoUrl: "" // 替换为实际视频URL
    };
  },
  computed: {
    ...mapGetters(["websiteUrl", "csUrl"]),
    userData() {
      return this.$store.state.userData;
    },

    data1() {
      return [
        {
          name: this.$t("title.doc30"),
          url: "/my/password_login",
          img: require("../../assets/images/u_it1.png"),
          active: 1,
        },
        {
          name: this.$t("page.doc97"),
          url: "/my/password_trade",
          code: "trade",
          img: require("../../assets/images/u_it2.png"),
          active: 2,
        },
        {
          name: this.$t("page.doc98"),
          url: "/my/invite",
          img: require("../../assets/images/u_it3.png"),
          active: 3,
        },
      ];
    },
  },

  mounted() {
    this.getIncome();
    this.init();
  },
  filters: {
    Svalues(value) {
      if (value) {
        return Number(value.toString().match(/^\d+(?:\.\d{0,2})?/));
      }
    },
  },
  methods: {
    ...mapMutations([
      "SET_ISASSETS",
      "SET_USERDATA",
      "SET_IFRAME_SRC",
      "SET_CS_SRC",
    ]),
    ...mapActions(["resetVuex", "Get_userData"]),

    init() {
      // this.$post(this.URL.member.url).then((res) => {
      //   if (res.code == 0) {
      //     res.data.map((item) => {
      //       if (item.tag == "CUSTOMER_SERVICE_LINK") {
      //         this.list3[1].url = item.url;
      //       }
      //       if (item.tag == "Official_Website") {
      //         this.list1[0].url = item.url;
      //       }
      //     });
      //   }
      // });
      this.getNoticeInfo();
      // 获取首页最新站内信接口
      this.$post(this.URL.member.new_within)
        .then((res) => {
          if (res.code == 0) {
            if (res.data) {
              this.isShowNoticeObj = res.data;
              this.isShowNotices = true;
              // setTimeout(() => {
              //   this.isShowNotices = false;
              //   this.upNotification();
              // },5000)
            } else {
              this.upNotification();
            }
          } else {
            this.$toast(res.message);
            this.upNotification();
          }
        })
        .catch(() => {
          this.upNotification();
        });
    },
    async getNoticeInfo() {
      const res = await this.$post(this.URL.member.message_type);
      if (res.code == 0) {
        this.unreadCount = res.data.unreadCount;
      }
    },
    popupClose() {
      this.isShowNotices = false;
      this.upNotification();
    },
    isShowNoticeFalse() {
      this.isShowNoticeImgIndex++;
      if (this.isShowNoticeImgIndex == this.isShowNoticeImgArr.length) {
        this.isShowNotice = false;
      } else {
        this.isShowNoticeItem = {};
        setTimeout(() => {
          this.isShowNoticeItem =
            this.isShowNoticeImgArr[this.isShowNoticeImgIndex];
        }, 500);
      }
    },
    // 获取弹窗
    upNotification() {
      this.$post(this.URL.member.pop_list).then((res) => {
        if (res.code == 0 && res.data.length > 0) {
          let arr = res.data;
          this.isShowNoticeImgArr = arr;
          this.isShowNoticeItem = arr[0];
          this.isShowNotice = true;
        } else {
          this.isShowNotice = false;
        }
      });
    },
    check() {
      this.path_url(`/article?id=PROXY_SCHEME`);
      // this.$toast(this.$t('page3.doc84'));
    },
    getIncome() {
      this.$post(this.URL.income.assets, {}).then((res) => {
        if (res.code == 0) {
          this.income_info = res.data;
        }
      });
    },

    changeImage(e) {
      const file = e.target.files[0];
      const reader = new FileReader();
      const that = this;
      reader.readAsDataURL(file);

      reader.onload = function () {
        that.userData.avatar = this.result;
      };
    },

    //图片上传
    async handleAfterRead(e) {
      const toast = this.$toast.loading({
        forbidClick: true,
      });
      const file = await this.common
        .compressor(e, {
          maxWidth: 700,
          maxHeight: 700,
        })
        .catch(() => {
          toast.clear();
        });

      this.$post(this.URL.user.upimg, file, {
        isUpload: true,
      })
        .then((res) => {
          if (res.code == 0) {
            this.userData.avatar = res.data.url;
            this.user_up();
          } else {
            this.$toast(res.message);
          }
        })
        .finally(() => {
          toast.clear();
        });
    },

    user_up() {
      this.$post(this.URL.member.infoUp, this.userData).then((res) => {
        if (res.code == 0) {
          this.$toast(res.message);
          this.$store.dispatch("Get_userData");
        } else {
          // this.$toast(res.message);
        }
      });
    },

    copy() {
      this.$toast(this.$t("page.doc31"));
    },
    quit() {
      this.resetVuex();
      this.$toast(this.$t("page.doc100"));
      // this.path_url('/')
      this.path_url("/user/login?status=1");
    },
    path_url(url, active = 1) {
      if(url === 'web') {
        this.videoUrl = this.to('Official_Video')
        this.showVideo = true;
        return;
      }
      if (url === "website") {
        this.SET_IFRAME_SRC(this.websiteUrl);
        this.$router.push("/iframe");
      } else if (url === "CS") {
        this.$router.push("/customer");
      } else if (url == "tips") {
        this.$toast(this.$t("title.doc53"));
      } else if (url) {
        let str = url.substring(0, 1);
        if (
          url === "/my/real_authentication" &&
          this.userData.identityStatus === 0
        ) {
          this.$toast(this.$t("page4.doc119"));
          return;
        } else if (
          url === "/my/real_authentication" &&
          this.userData.identityStatus === 1
        ) {
          this.$toast(this.$t("page4.doc162"));
          return;
        } else if (
          url == "/my/invite" &&
          this.$store.state.userData.level == 0
        ) {
          this.$toast(this.$t("page4.doc42"));
          return;
        } else {
          if (str == "/") {
            this.$router.push({
              path: url,
              query: {},
            });
          } else {
            this.common.openUrl(url);
          }
        }
      }
    },
    to(n) {
      const { url } = this.$store.state.h5Url.find(({ tag }) => n === tag);
      return url
    },
    maskNickname(nickname) {
      if (nickname.length <= 4) return nickname; // 如果昵称长度小于等于4，返回原昵称
      const start = nickname.slice(0, 2); // 取前两个字符
      const end = nickname.slice(-2); // 取后两个字符
      const stars = "*".repeat(nickname.length - 4); // 生成中间的星号
      return `${start}${stars}${end}`; // 拼接前两个字符、星号和后两个字符
    },
    onCopy(text) {
      if (navigator.clipboard) {
        navigator.clipboard
          .writeText(text)
          .then(() => {
            this.$toast(this.$t("page1.doc52"));
          })
          .catch((err) => {
            console.error("无法复制文本: ", err);
          });
      } else {
        console.warn("浏览器不支持 Clipboard API");
      }
      // // 复制
      // this.$copyText(text);
    },
    closeVideo() {
      this.showVideo = false;
      if(this.$refs.videoPlayer) {
        this.$refs.videoPlayer.pause();
      }
    }
  },
};
</script>

<style lang="less" scoped>
:deep(.van-badge) {
  border: 0;
}

.home {
  // background: #141517 url("../../assets/images/bg_my.png") no-repeat top center;
  // background-size: 100% auto;min-height: 100vh;
  // background: var(--CObackgroundLinear2);
  //background: #141517 url("../../assets/images/Group32.png") no-repeat top center;
  //background-size: 100% 100%;
  background: #151515;
  min-height: 100vh;
}

.he_top {
  // background: #141517 url("../../assets/images/Group32.png") no-repeat top center;
  // background-size: 100% 100%;
  min-height: 4vh;
  padding: 0 0.28rem;
}

.head {
  padding-top: 0.4rem;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .flex {
    align-items: center;
  }

  .flex1 {
    width: 3.6rem;
  }

  .ri {
    color: #fff;
    font-family: PingFang SC;
    font-size: 0.24rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-transform: capitalize;
    padding: 0.12rem 0.24rem;
    border-radius: 0.24rem;
    background: linear-gradient(99deg, #7a03fe 0%, #076ffd 100%);
    cursor: pointer;
  }

  .photo {
    width: 1.2rem;
    height: 1.2rem;
    // background: linear-gradient(180deg, #f95e48, #df3783);
    background: linear-gradient(93.04deg, #231b44 0%, #0a1242 100%);
    border: var(--border);
    padding: 0.04rem;
    border-radius: 50%;
    overflow: hidden;
    margin-right: 0.2rem;

    img {
      width: 100%;
      height: 100%;
    }

    .file {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      opacity: 0;
    }
  }

  .n {
    font-size: 0.4rem;
    font-weight: 500;
    color: #ffffff;
    line-height: 0.56rem;
    margin-right: 0.61rem;
    // margin-bottom: .14rem;
  }

  .s {
    font-size: 0.24rem;
    color: #ababb3;

    button {
      // height: .34rem;
      // background: linear-gradient(180deg,#f95e48, #df3783);
      background: var(--CObackgroundLinear1);
      border-radius: 0.08rem;
      // line-height: .34rem;
      padding: 0rem 0.1rem;
      color: #fff;
      font-size: 0.2rem;
      border: 0;
    }

    img {
      width: 0.24rem;
      height: 0.24rem;
    }
  }
}

.my_icon {
  color: #fff;
  font-family: PingFang SC;
  font-size: 0.24rem;
  font-style: normal;
  font-weight: 500;
  text-align: center;
  width: 25%;

  img {
    height: 0.8rem;
    margin-bottom: 0.1rem;
  }
}

.info {
  background: url("../../assets/images/bg_u.png") no-repeat;
  background-size: 100% 100%;
  padding: 0.2rem 0.24rem;
  margin: 0.32rem 0;
  color: #fff;

  .he {
    line-height: 0.4rem;

    .more {
      font-size: 0.24rem;

      i {
        vertical-align: middle;
        margin-left: 0.08rem;
      }
    }
  }

  .amount {
    font-size: 0.52rem;
    font-weight: 500;
    line-height: 0.73rem;
    margin-top: 0.12rem;
  }
}

.infos_list {
  //padding: 0.34rem 0.44rem;
  //margin: 0.32rem 0;
  margin-top: 0.44rem;
  padding-top: 0.26rem;
  padding-bottom: 0.56rem;
  color: var(--COcolor3);
  border-radius: 0.24rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
  background: linear-gradient(180deg, #f8f8e0 0%, #f5b975 100%);

  .le {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 0.44rem;

    .name {
      width: 100%;

      .ti {
        //styleName: 12常规黑体;
        font-family: Microsoft YaHei UI;
        font-size: 12px;
        font-weight: 400;
        line-height: var(--lineheight14);
        text-align: center;
        color: #000000;
        margin-top: 0.16rem;
      }

      .pr {
        font-family: Microsoft YaHei UI;
        font-size: 18px;
        font-weight: 700;
        line-height: var(--lineheight14);
        text-align: center;
        color: #000000;

        .icon {
          margin-left: 0.08rem;

          i {
            font-size: 0.26rem;
            color: #ababb3;
          }
        }
      }
    }

    .line {
      height: 100%;
      position: relative;

      &::after {
        content: "";
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        background: url("../../assets/images/Line 2.png") no-repeat;
        background-size: 100% 100%;
        width: 0.04rem;
        height: 130%;
      }
    }
  }
}

.list-1 {
  border-radius: 0.16rem;
  background: rgba(255, 255, 255, 0.08);
  margin-bottom: 0.24rem;
  padding: 0 0.24rem;

  li {
    border-bottom: 0.02rem solid rgba(255, 255, 255, 0.08);
    padding: 0.3rem 0;

    &:last-child {
      border: 0;
    }

    .s {
      i {
        color: #ababb3;
      }
    }

    img {
      height: 0.48rem;
    }

    .name {
      color: #ababb3;
      margin: 0 0.2rem;
    }
  }
}

.btn {
  background: linear-gradient(113.99deg, #114fee 6.12%, #b654fd 83.22%);
  margin-top: 0.2rem;
}

.btn1 {
  color: #ababb3;
  background: #1f212c;
}

.flexs1 {
  color: var(--color1);
}

.bg {
  img {
    width: 100%;
  }
}

.tool {
  //display: grid;
  //grid-template-columns: repeat(3, 1fr);

  .item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.28rem 0;

    .l {
      display: flex;
      align-items: center;
      gap: 0.16rem;

      img {
        width: 0.48rem;
      }
    }
  }
}

.but {
  margin: 0.88rem 0rem 1.3rem 0rem;
  background: var(--CObackgroundLinear2);
  box-shadow: 0rem 0.1rem 0.2rem 0rem rgba(0, 0, 0, 0.1);
  border-radius: 0.2rem;
  text-align: center;
  padding: 0.29rem 0rem;
  font-size: 0.28rem;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: var(--COcolor3);
  text-shadow: 0rem 0.1rem 0.2rem rgba(0, 0, 0, 0.1);
}

.my_icon_img {
  display: flex;
  align-items: center;
  justify-content: center;
  //padding-top: 0.24rem;
  //margin-bottom: 0.14rem;

  span {
    margin-left: 0.14rem;
  }

  img {
    height: 0.8rem;
  }
}

.bott {
  display: flex;
  align-items: center;
  gap: 0.24rem;
}

.no_po_show {
  background: none;
}

.closeimg {
  margin-top: 0.24rem;
  text-align: center;

  .closure {
    width: 0.56rem;
    height: 0.56rem;
  }
}

.no_po {
  position: relative;
  font-family: PingFang SC;
  // padding: 0.2rem 0rem 0rem 0.2rem;
  max-height: 90vh;
  overflow-y: scroll;
  text-align: center;

  .close {
    // position: absolute;
    // top: 0.1rem;
    // left: 0.1rem;
    // z-index: 300000;
    // height: 1.12rem;
    width: 100%;
  }

  .top {
    border-radius: 0.32rem 0.32rem 0rem 0rem;
    background: #143e78;
    padding: 0.4rem;

    .n {
      margin-left: 1.2rem;
      color: #3edce8;
      font-size: 0.32rem;
      font-weight: 600;
      line-height: 0.32rem;

      white-space: nowrap; /*禁止换行*/
      overflow: hidden; /*超出部分隐藏*/
      text-overflow: ellipsis; /*超出部分用省略号表示*/
    }
  }

  .con {
    border-radius: 0rem 0rem 0.32rem 0.32rem;
    background: #01285f;
    padding: 0.4rem;
    color: #c1effe;

    .s1 {
      font-size: 0.28rem;
      font-weight: 500;
      line-height: 0.32rem;

      // word-break: break-all;
      // text-overflow: ellipsis;
      // display: -webkit-box;
      // -webkit-box-orient: vertical;
      // -webkit-line-clamp: 2; /* 这里是超出几行省略 */
      // overflow: hidden;

      max-height: 1.2rem;
      overflow-y: scroll;
    }

    .s2 {
      margin-top: 0.4rem;
      font-size: 0.26rem;
      line-height: 0.32rem;
      max-height: 2.5rem;
      overflow-y: scroll;
    }

    .s3 {
      margin-top: 0.4rem;
      font-size: 0.26rem;
    }
  }
}

//
.no_po_shows {
  background: none;
}

.no_pos {
  position: relative;
  font-family: PingFang SC;
  padding: 0.2rem 0rem 0rem 0.2rem;

  .close {
    position: absolute;
    top: 0.1rem;
    left: 0.1rem;
    z-index: 300000;
    height: 1.12rem;
  }

  .top {
    border-radius: 0.32rem 0.32rem 0rem 0rem;
    background: #143e78;
    padding: 0.4rem;

    .n {
      margin-left: 1.2rem;
      color: #3edce8;
      font-size: 0.32rem;
      font-weight: 600;
      line-height: 0.32rem;

      white-space: nowrap; /*禁止换行*/
      overflow: hidden; /*超出部分隐藏*/
      text-overflow: ellipsis; /*超出部分用省略号表示*/
    }
  }

  .con {
    border-radius: 0rem 0rem 0.32rem 0.32rem;
    background: #01285f;
    padding: 0.4rem;
    color: #c1effe;

    .s1 {
      font-size: 0.28rem;
      font-weight: 500;
      line-height: 0.32rem;

      // word-break: break-all;
      // text-overflow: ellipsis;
      // display: -webkit-box;
      // -webkit-box-orient: vertical;
      // -webkit-line-clamp: 2; /* 这里是超出几行省略 */
      // overflow: hidden;

      max-height: 1.2rem;
      overflow-y: scroll;
    }

    .s2 {
      margin-top: 0.4rem;
      font-size: 0.26rem;
      line-height: 0.32rem;
      max-height: 2.5rem;
      overflow-y: scroll;
    }

    .s3 {
      margin-top: 0.4rem;
      font-size: 0.26rem;
    }
  }
}

.video-popup {
  background: rgba(0, 0, 0, 0.8);
  
  .video-container {
    position: relative;
    width: 95vw;
    max-width: 8rem;
    padding-bottom: 1rem;
    
    .video-player {
      width: 100%;
      border-radius: 0.16rem;
    }

    .bottom-close-btn {
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 0.8rem;
      height: 0.8rem;
      background: rgba(255, 255, 255, 0.8);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      margin-top: 0.3rem;
      
      .van-icon {
        color: #333;
      }
      
      &:active {
        opacity: 0.8;
      }
    }
  }
}
</style>
